<template>
	<u-popup :show="show" mode="bottom" @close="close" round="18" :closeable="true">
		<view>
			<view class="fee-tlt">功率区间计算标准</view>
			<scroll-view scroll-y="true" :style="{height:feeContentH+'px'}">
				<view class="table">
					<view class="header">
						<view class="boder-r border-bottm">功率区间（W）</view>
						<view class="border-bottm">每小时价格（元）</view>
					</view>
					<view class="fee-item" v-for="(item,index) in feeList" :key="index">
						<view class="boder-r border-bottm">{{item.minPower}}-{{item.maxPower}}</view>
						<view class="border-bottm">{{item.everyHourSalesPrice}}</view>
					</view>
				</view>
				<view class="fee-tip">提示：选择智能充电时电瓶充满自动断电停止计费省时省力。</view>
				<view class="closeBtn" @click.stop="show=false">知道啦</view>
				<view style="height: 20px;"></view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	var globalData = getApp({
		allowDefault: true
	}).globalData
	import * as siteApi from '../../api/site/index.js'
	export default {
		data() {
			return {
				show: false,
				feeContentH:50,
				id:'',
				feeList: []
			}
		},
		methods: {
			open(id) {
				this.show = true;
				this.id=id;
				this.getSiteDetail();
				let feeH = (this.feeList.length + 1) * 34 + 125
				let maxFeeH = globalData.windowHeight
				maxFeeH = maxFeeH - 30 - 60
				if (feeH >= maxFeeH) {
					this.feeContentH = maxFeeH
				} else {
					this.feeContentH = feeH
				}
			},
			close() {
				this.show = false
			},
			getSiteDetail() {
				siteApi.getChargingGroupDetail(this.id).then((res)=>{
					console.log('功率区间' + res.data.chargingPowerList)
					this.feeList = res.data.chargingPowerList
					let feeH = (this.feeList.length + 1) * 34 + 125
					let maxFeeH = globalData.windowHeight
					maxFeeH = maxFeeH - 30 - 60
					if (feeH >= maxFeeH) {
						this.feeContentH = maxFeeH
					} else {
						this.feeContentH = feeH
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*价格激素n*/
	.table {
		// background-color: #EAEAEA;
		width: 256px;
		margin: 0 auto;
		border: solid 1px #EAEAEA;
		border-bottom: none;
	}
	
	.header {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
	
		view {
			flex: 1;
			height: 34px;
			background: rgba(3, 208, 178, 0.05);
			font-size: 12px;
			color: #333333;
			text-align: center;
			line-height: 34px;
		}
	}
	.fee-tlt {
		color: #000000;
		font-size: 14px;
		width: 100%;
		text-align: center;
		margin-top: 24px;
		margin-bottom: 18px;
	}
	
	.fee-item {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
	
		view {
			flex: 1;
			height: 34px;
			background: white;
			font-size: 12px;
			color: #333333;
			text-align: center;
			line-height: 34px;
		}
	}
	
	.boder-r {
		border-right-color: red;
		border-right-width: 1px;
		border-right: solid 1px #EAEAEA;
	}
	
	.border-bottm {
		border-bottom-color: #EAEAEA;
		border-bottom-width: 1px;
		border-bottom: solid 1px #EAEAEA;
	}
	
	.fee-tip {
		color: #333333;
		font-size: 12px;
		margin-top: 12px;
		margin-left: 15px;
		margin-right: 15px;
	}
	
	.closeBtn {
		height: 45px;
		line-height: 45px;
		background: #6ABF6C;
		box-shadow: 0px 1px 2px 0px rgba(8, 139, 120, 0.3);
		border-radius: 45px;
		color: white;
		font-size: 16px;
		text-align: center;
		margin: 33px 15px 0px 15px;
	}
</style>
